<template>
	<view>
		<navbar :title="$t('bank.bankmanage')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		<view :class="item.default === type ? 'bank1' : 'bank2' " v-for="(item, index) in list " :key="index" @click="edit(item)">
			<view class="bank-info">
				<view class="name">
					{{getBankName(item.bankname)}}
				</view>
				<view class="default" v-show="item.default == 1" @click.stop="change(item)">
					{{$t("bank.default")}}
				</view>
				<view class="set" v-show="item.default == 0" @click.stop="change(item)">
					{{$t("bank.set")}}
				</view>
			</view>
			<view class="card-number" @click="hide(item)">
				{{item.bankcard}}
			</view>
		</view>
		<view class="add">
			<view class="add-tip" @click="add">
				<u-image src="../../static/image/add.png" mode="" height="54rpx" width="54rpx"></u-image>
				<view class="add-font">
					{{$t("bank.add")}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getbanklist,
		setdefault,
		bankcodelist
	}from '@/api/bank.js'
	export default {
		data() {
			return {
				type: 1 ,
				id:'',
				isdefault:'',
				bankcard:'',
				id:'',
				isfault:'',
				list:[
					
				],
				banklist: []
			}
		},
		async onLoad() {
			await this.loadBank();
			this.load();
		},
		methods: {
			getBankName(val) {
				for (let i of this.banklist) {
					if (i.value == val) {
						return i.label;
					}
				}
				return '';
			},
			async loadBank(){
				let result = await bankcodelist()
				this.banklist = result
			},
			async change(e) {
				if(e.default == 0){
					for(let i=0 ;i< this.list.length; i++ ){
						if(e.id== this.list[i].id){
							this.list[i].default=1
						}else{
							this.list[i].default=0
						}
					}
				}
				uni.showLoading();
				let result = await setdefault({
					id: e.id,
					is_default : 1
				})
				uni.hideLoading();
				this.load();

			},
			hide(e){
				
			},
			edit(item){
				uni.navigateTo({
					url: './bankedit?cardinfo= ' + encodeURIComponent(JSON.stringify(item))
				})
			},
			add(){
				uni.navigateTo({
					url:'../Addbank/Addbank'
				})
			},
			async load(){
				let result = await getbanklist()
				console.log(result)
				this.list = result
			}
		},
		onShow() {
			this.load()
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.bank1{
		width: 670rpx;
		height: 220rpx;
		background: linear-gradient(90deg, #CA3A39 0%, #B41719 100%);
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(170,170,170,0.7);
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 40rpx;
	}
	.bank2{
		width: 670rpx;
		height: 220rpx;
		background: linear-gradient(90deg, #50516A 0%, #2D2E4B 100%);
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(170,170,170,0.7);
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 40rpx;
	}
	
	
	.bank-info{
		display: flex;
		justify-content: space-between;
		.name{
			font-size: 34rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34rpx;
		}
		.default{
			border: 2rpx solid #FFFFFF;
			opacity: 0.5;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.5;
			width: 180rpx;
			height: 42rpx;
			line-height: 42rpx;
			text-align: center;
			margin-top: -11rpx;
		}
		.set{
			width: 250rpx;
			height: 42rpx;
			border: 2rpx solid #FFFFFF;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: center;
			margin-top: -11rpx;
		}
	}
	
	.card-number{
		font-size: 50rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 69rpx;
		line-height: 50rpx;
	}
	
	.add{
		
		width: 670rpx;
		height: 220rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(170,170,170,0.2);
		border-radius: 20rpx;
		margin: 0 40rpx;
		margin-top: 40rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
	
		.add-tip{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			.add-font{
				margin-left: 22rpx;
			}
		}
		
	}
</style>
